<template>
  <div style="background-color: black; height: 1010px">
    <div style="margin-left: 27%">
      <img
        style="width: 900px; height: 900px"
        src="../assets/bigrock.gif"
        alt=""
      />
    </div>
    <div class="bar" :style="aniShow ? 'width:100%' : 'width:0;'"></div>
    <div style="text-align: center; color: white">程序加载中</div>
  </div>
</template>
  <script>
import { gettoken } from "@/api/shop.js";
export default {
  data() {
    return {
      aniShow: false,
    };
  },
  created() {
    gettoken({ username: "selma", password: "123456" }).then((response) => {
      localStorage.setItem("token", response.data.token);
      this.loading = false;
    });
  },
  mounted() {
    setTimeout(() => {
      this.aniShow = true;
      localStorage.removeItem("itemhistory");
    }, 2000);
    setTimeout(() => {
      this.$router.push("/SystemSettings");
    }, 3000);
  },
};
</script>
  <style lang="scss" scoped>
.bar {
  transition: width 0.4s ease-in-out;
  height: 2rem;
  width: 1000px;
  border-radius: 1rem;
  background-color: white;
  background-image: linear-gradient(to right, white, skyblue);
}
</style>